<template>
  <div class="bigbox">
    <video autoplay loop muted src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" />
    <el-card class="box-card">

      <div class="imgbox"><img src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png" alt=""></div>
      <el-form ref="roleForm" :model="loginForm" :rules="rules">
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            placeholder="账号"
            prop=""
          >
            <i slot="prefix" class="el-icon-user" />
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="密码" show-password type="password">
            <i slot="prefix" class="el-icon-unlock" />
          </el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-input
            v-model="loginForm.code"

            placeholder="验证码"
          >
            <i slot="prefix" class="el-icon-unlock" />
            <template slot="append"> <img :src="ImgUrl" alt="" class="imgb"></template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" class="btn" @click="sub">登录</el-button>
        </el-form-item>

      </el-form>

      <p>仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
      </p>
    </el-card>
  </div>
</template>

<script>

import { captcha } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {

      ImgUrl: '',
      loginForm: {
        account: 'shenlingadmin',
        password: '123456',
        code: '',
        bindAccount: '',
        bindPassword: '',
        signAccount: '',
        signPassword: '',
        tenant: '0000',
        key: ''

      },
      data: {
        loading: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 6, max: 20, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }

        ]
      },
      jsonString: ''
    }
  },
  async created() {
    this.data.loading = Math.floor(Math.random() * 9000) + 1000
    const res = await captcha(this.data.loading)
    // console.log(res)
    this.loginForm.key = this.data.loading.toString()
    // console.log(this.loginForm.key)
    this.ImgUrl = window.URL.createObjectURL(new Blob([res.data]))
    // this.loginForm.loading = Math.floor(Math.random() * 9000) + 1000
    // this.$store.dispatch('user/login', this.form.loading)

    // const res = await captcha(this.form.loading)
    // this.ImgUrl = window.URL.createObjectURL(new Blob([res]))
  },
  methods: {
    yonghu() {
      this.jsonString = JSON.stringify(this.loginForm)
      localStorage.setItem('yonghu', this.jsonString)
    },
    sub() {
      this.$refs.roleForm.validate(async(isOK) => {
        // console.log(isOK)
        if (isOK) {
          await this.$store.dispatch('user/login', this.loginForm)
          this.$message.success('登录成功')
          this.$router.push('/')
          this.yonghu()
        }
      })
    },
    async cs() {
      // console.log('你好')

    }
  }

}
</script>

<style lang="scss" >
*{
   margin: 0px;
   padding: 0px;
   }
.el-icon-unlock{
  margin-top: 10px;
}
   .imgb{
    width: 60px;
    height: 30px;
   }

  .box-card {
    font-size: 14px;
    width: 450px;
    height: 490px;
    margin: 0 auto;
    margin-top: 180px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    padding: 30px;

  }

  .imgbox img{

  height: 54px;
  margin-left: 90px;
  margin-bottom: 15px;

  }
  .btn{
   width: 100%;
   background-color: #e15536;
  }
  p{
    color: red;
  }
 video{
            position: fixed;
            right: 0px;
            bottom: 0px;
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/
            /*filter:grayscale(100%); //背景灰度设置*/
            z-index:-11
   }

</style>
